import React from 'react';
import { Input as AntInput } from 'antd';
import type { InputProps as AntInputProps } from 'antd/lib/input';
import type { TextAreaProps as AntTextAreaProps } from 'antd/lib/input/TextArea';
import type { SizeType } from 'antd/lib/config-provider/SizeContext';
import './Input.css';

export type InputSize = 'small' | 'medium' | 'large';

export interface InputProps extends Omit<AntInputProps, 'size'> {
  size?: InputSize;
  label?: string;
  error?: string;
  fullWidth?: boolean;
}

export interface TextAreaProps extends Omit<AntTextAreaProps, 'size'> {
  size?: InputSize;
  label?: string;
  error?: string;
  fullWidth?: boolean;
}

const mapSizeToAntSize = (size: InputSize): SizeType => {
  switch (size) {
    case 'small': return 'small';
    case 'large': return 'large';
    default: return 'middle';
  }
};

export const Input: React.FC<InputProps> = ({
  size = 'medium',
  label,
  error,
  fullWidth = false,
  className = '',
  ...props
}) => {
  const antSize = mapSizeToAntSize(size);
  const containerClasses = [
    'input-container',
    fullWidth ? 'input-container-full' : ''
  ].filter(Boolean).join(' ');
  
  const inputClasses = [
    'input',
    `input-${size}`,
    error ? 'input-error' : '',
    className
  ].filter(Boolean).join(' ');
  
  return (
    <div className={containerClasses}>
      {label && <label className="input-label">{label}</label>}
      <AntInput
        className={inputClasses}
        size={antSize}
        {...props}
      />
      {error && <span className="error-text">{error}</span>}
    </div>
  );
};

// Password input
export const PasswordInput: React.FC<InputProps> = ({
  size = 'medium',
  label,
  error,
  fullWidth = false,
  className = '',
  ...props
}) => {
  const antSize = mapSizeToAntSize(size);
  const containerClasses = [
    'input-container',
    fullWidth ? 'input-container-full' : ''
  ].filter(Boolean).join(' ');
  
  const wrapperClasses = [
    'password-input-wrapper',
    error ? 'password-input-wrapper-error' : '',
    className
  ].filter(Boolean).join(' ');
  
  return (
    <div className={containerClasses}>
      {label && <label className="input-label">{label}</label>}
      <div className={wrapperClasses}>
        <AntInput.Password
          size={antSize}
          {...props}
        />
      </div>
      {error && <span className="error-text">{error}</span>}
    </div>
  );
};

// TextArea
export const TextArea: React.FC<TextAreaProps> = ({
  size = 'medium',
  label,
  error,
  fullWidth = false,
  rows = 4,
  className = '',
  ...props
}) => {
  const antSize = mapSizeToAntSize(size);
  const containerClasses = [
    'input-container',
    fullWidth ? 'input-container-full' : ''
  ].filter(Boolean).join(' ');
  
  const textareaClasses = [
    'textarea',
    error ? 'textarea-error' : '',
    className
  ].filter(Boolean).join(' ');
  
  return (
    <div className={containerClasses}>
      {label && <label className="input-label">{label}</label>}
      <AntInput.TextArea
        className={textareaClasses}
        size={antSize}
        rows={rows}
        {...props}
      />
      {error && <span className="error-text">{error}</span>}
    </div>
  );
};

export default Input; 